<template>
  <teleport to="body" :disabled="!toBody">
    <div class="dialogX" :style="{
            '--heightD': heightD, // 弹窗高度
            '--paddingT': String(padding[0]) + 'px',
            '--paddingR': String(padding[1])+ 'px',
            '--paddingB': String(padding[2])+ 'px',
            '--paddingL': String(padding[3])+ 'px',
            '--newZIndex': String(newZIndex),
            '--minWidth': String(minWidthD),
          }">
      <div class="all one" v-if="which=='one'"
           :class="{vxeStyle: vxeStyle,smallIconFather: smallIcon,isSmall: isSmall}">
        <el-dialog v-model="showD" @open="open" @close="close" :title="title"
                   :fullscreen="isFull" :destroy-on-close="destroyOnClose"
                   :close-on-click-modal="closeModal" ref="dialogRef"
                   :width="contentWidthT" :top="top" :draggable="draggableD" v-bind="$attrs">
          <template #default>
            <slot/>
          </template>
          <template #header>
            <div class="headBox">
              <slot name="header">
                <span>{{ title }}</span>
                <span class="smallIcon" v-if="smallIcon" @click="isSmall=!isSmall">
                  <icon-x type="Minus" size="17" v-if="!isSmall"/>
                  <icon-x type="CopyDocument" size="17" v-else/>
                </span>
              </slot>
            </div>
          </template>
          <template #footer v-if="showFooterBn">
            <slot name="footer">
              <el-button v-if="!noShowSaveBn" type="primary" @click="save">
                {{ saveText }}
              </el-button>
              <el-button v-if="!noShowCloseBn" @click="closeD">
                {{ closeText }}
              </el-button>
            </slot>
          </template>

        </el-dialog>
      </div>

    </div>
  </teleport>
</template>

<script>
import {ElDialog, ElButton} from 'element-plus'
import IconX from './xhykIcon.vue'

export default {
  name: 'xhykDialog',
  emits: ['save', 'close', 'open', 'update:show'],
  components: {
    ElDialog,
    IconX,
    ElButton
  },
  props: {
    which: { // 使用哪个弹窗,尽量使用第一个
      type: String,
      default: 'one'
    },
    title: { // 弹窗标题
      type: String,
      default: '二次封装弹窗'
    },
    fullscreen: { // 是否全屏
      type: Boolean,
      default: false
    },
    // 一开打的弹窗宽度
    contentWidth: {
      type: [String, Number],
      default: '90%'
    },
    // 弹窗宽度
    width: {
      type: [String, Number, undefined],
      default: undefined
    },

    // 弹窗高度
    height: {
      type: [String, Number],
      default: undefined
    },

    show: {
      type: Boolean,
      default: false
    },
    bnText: {
      type: Object,
      default: {
        close: '取消',
        save: '确认',
        // 是否为国际化文本
        i18Text: true,
      }
    },
    // 显示默认底部按钮
    showFooterBn: {
      type: Boolean,
      default: true
    },
    // 不显示确认按钮
    noShowSaveBn: {
      type: Boolean,
      default: false
    },
    // 不显示取消按钮
    noShowCloseBn: {
      type: Boolean,
      default: false
    },
    top: {
      type: [String, Number],
      default: '5vh'
    },
    // 可拖拽
    draggable: {
      type: Boolean,
      default: true
    },
    // padding尺寸
    padding: {
      type: Object,
      default: [0, 10, 0, 10]
    },
    // 弹窗层级
    newZIndex: {
      type: [String, Number],
      default: '200'
    },

    // 销毁时关闭
    destroyOnClose: {
      type: Boolean,
      default: true
    },
    toBody: {
      type: Boolean,
      default: false
    },
    minWidth: {
      type: [String, Number],
      default: 'auto'
    },

    // 是否使用vxeTable的弹窗样式
    vxeStyle: {
      type: Boolean,
      default: true
    },

    // 显示最大小化图标
    smallIcon: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      showD: this.show,
      isFull: this.fullscreen,
      // 最小化
      isSmall: false,

      // 最小化时的左边
      smallLeft: '0px',
      // 最小化时的底边
      smallBottom: '0px',

      saveText: this.bnText.save,
      closeText: this.bnText.close,
    }
  },
  watch: {
    show(newValue) {
      this.showD = newValue
      this.saveText = this.bnText.save
      this.closeText = this.bnText.close

      if (this.showD) {
        this.isSmall = false

        if (this.bnText.i18Text) {
          if (this.saveText == '确认') {
            this.saveText = this.getI18Text('bnText.sureBn')
          } else {
            this.saveText = this.getI18Text(this.bnText.save)
          }
          if (this.closeText == '取消') {
            this.closeText = this.getI18Text('bnText.cancelBn')
          } else {
            this.closeText = this.getI18Text(this.bnText.close)
          }
        } else {
          this.saveText = this.bnText.save
          this.closeText = this.bnText.close
        }

      }
    },

    fullscreen(newValue) {
      this.isFull = newValue
    },

    isSmall(newV) {
      const leftTemp = 12
      const dom = this.$refs.dialogRef?.$el?.nextSibling

      if (dom) {
        const elDialogDom = dom.querySelector('.el-dialog')
        if (elDialogDom) {

          // 如果是取消隐藏，把位置transform重新顶到屏幕中间
          // if (!newV){
          //   elDialogDom.style.transform = 'translate(0px,0px)'
          //   return
          // }

          // 获取偏移量translate
          const translate = elDialogDom.style.transform.replace('translate(', '').replace(')', '')
          const list = translate.split(',')
          if (list.length >= 2) {
            const tempLeft = parseFloat(list[0])
            const tempBottom = parseFloat(list[1])
            // 左边取反
            this.smallLeft = tempLeft * -1 + leftTemp + 'px'
            // 底边减头部高度
            this.smallBottom = tempBottom - 40 + 'px'
          } else {
            this.smallLeft = `${leftTemp}px`
            this.smallBottom = this.fullscreen ? '10px' : '-40px';
          }


        }
      }
    },

  },

  methods: {
    // 弹窗打开时
    open() {
      this.$emit('open')
    }
    ,
    // 弹窗关闭时
    close() {
      this.showD = false
      this.$emit('close')
      this.$emit('update:show', false)
    }
    ,
    // 点击关闭按钮
    closeD() {
      this.close()
    },

    // 点击保存按钮
    save() {
      this.$emit('save')
    },

    // 获取国际化文本
    getI18Text(text) {
      if (typeof this.$t == 'function') {
        return this.$t(text)
      } else {
        return text
      }
    }

  },

  computed: {
    heightD() {
      if (this.height == undefined || this.height == 'auto') {
        return 'auto'
      }
      if (this.height != undefined && typeof this.height == 'string') {
        if (this.height.indexOf('px') == -1) {
          if (this.height.indexOf('%') != -1 || this.height.indexOf('vh') != -1) {
            return this.height
          } else {
            return this.height + 'px'
          }
        } else {
          return this.height
        }
      } else {
        return String(this.height) + 'px'
      }
    },

    // 宽度
    contentWidthT() {
      // 为了兼容以前的字段
      let nowWidth = undefined
      if (this.width == undefined) {
        nowWidth = this.contentWidth
      } else {
        nowWidth = this.width
      }
      // console.log(123,nowWidth,this.width)
      if (typeof nowWidth == 'string') {
        if (nowWidth.indexOf('px') == -1 && nowWidth.indexOf('vw') == -1 && nowWidth.indexOf('%') == -1) {
          // 没有单位，但是数值格式
          return Number.parseFloat(nowWidth)
        } else {
          return nowWidth
        }
      } else {
        return nowWidth
      }
    },

    // 最小宽度
    minWidthD() {
      let result = this.minWidth
      if (typeof result == 'string') {
        if (!result.includes('px') && !result.includes('%') &&
            !result.includes('vw') && !result.includes('vh') &&
            !result.includes('auto') && !result.includes('rpx')) {
          result = `${result}px`
        }
      } else {
        result = `${parseFloat(result)}px`
      }
      return result
    },

    // 点击遮蔽层是否进行关闭
    closeModal() {
      // 不是缩小或者不显示图标时为true
      return !this.isSmall || !this.smallIcon
    },

    // 可拖拽
    draggableD() {
      // 最小化时，不给拖动，防止拖动后放大溢出屏幕
      return this.draggable && !this.isSmall
    }
  },

}
</script>

<style scoped lang='scss'>
.all {
}

.one {
  :deep(.el-dialog__body) {
    height: var(--heightD);
    padding: {
      top: var(--paddingT);
      right: var(--paddingR);
      bottom: var(--paddingB);
      left: var(--paddingL);
    }
  }
}

.dialogX {
  .one {
    :deep(.el-overlay) {
      z-index: var(--newZIndex) !important;

      .el-dialog {
        min-width: var(--minWidth);
      }

      .el-dialog__headerbtn {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
      }

    }
  }
}


// region 仿vxeTable的弹窗样式
.vxeStyle {
  :deep(.el-dialog) {
    padding: 0px 0px 16px 0px;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, .4);
    border: 1px solid #58595B;

    .el-dialog__header {
      position: relative;
      height: 44px;
      padding-bottom: 0px;
      //margin-bottom: 6px;
      background-color: #F8F8F8;
      border-bottom: 1px solid #ddd;
      box-shadow: 0 0 4px 0px rgba(0, 0, 0, .3);
      z-index: 1;
      display: flex;
      align-items: center;
      border-top-left-radius: var(--el-dialog-border-radius);
      border-top-right-radius: var(--el-dialog-border-radius);

      .headBox {
        color: #606266;
        padding-left: 10px;
        font-size: 16px;
        font-weight: 700;
      }
    }

    .el-dialog__footer {
      padding-right: 16px;
      padding-left: 16px;
      padding-top: 8px;
    }
  }
}


// 显示缩小图标
.smallIcon {
  cursor: pointer;
  position: absolute;
  color: #909399;
  right: 50px;
  top: 20px;

  .CopyDocument {
    transform: translateY(-6px);
  }


  &:hover {
    color: var(--el-color-primary);
  }
}


:deep(.isSmall) {
  .el-dialog__footer {
    display: none;
  }

  .el-dialog__body {
    display: none;
  }

  .el-dialog {
    padding: 0px;
    width: 200px; // 根据需要调整宽度
    height: 45px; // 根据需要调整高度
    position: absolute;
    left: v-bind(smallLeft);
    bottom: v-bind(smallBottom);

    transition: left .3s, bottom .3s;

    border: none;
    overflow: hidden;

    .el-dialog__header {
      margin-bottom: 0px;
      border-radius: var(--el-dialog-border-radius);

      .headBox {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 120px;
      }
    }
  }
}

// endregion
</style>